<template>
  <div class="company-detail-container">
    <!-- 公司头部信息 -->
    <div class="company-header" v-if="company">
      <h1>
        <img :src="company.logo" alt="公司logo" class="company-logo"/>
        {{ company.name }}</h1>
      <div class="company-tags">
        <span class="tag">{{ listedStatus }}</span>
        <span class="tag">{{ employeeScale }}</span>
        <span class="tag">社交网络与媒体</span>
      </div>
      <div class="company-stats">
        <div class="stat-item">
          <span class="stat-number">{{ company.job_number }}</span>
          <span class="stat-label">在招职位</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ company.boss_number }}</span>
          <span class="stat-label">位BOSS</span>
        </div>
      </div>
      <div class="company-service-tag">
        <span class="service-tag">服务企业</span>
        <span class="service-tag">高新技术企业</span>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="company-nav">
      <div class="nav-item active">招聘企业</div>
      <div class="nav-item">招聘状态全</div>
    </div>

    <!-- 子导航 -->
    <div class="company-subnav">
      <div class="subnav-item" :class="{active: activeTab === 'intro'}" @click="activeTab = 'intro'">公司简介</div>
      <div class="subnav-item" :class="{active: activeTab === 'jobs'}" @click="activeTab = 'jobs'">
        招聘职位({{ company ? company.job_number : 0 }})
      </div>
      <div class="subnav-item" :class="{active: activeTab === 'reviews'}" @click="activeTab = 'reviews'">工作感受</div>
    </div>

    <!-- 内容区域 -->
    <div v-if="activeTab === 'jobs'" class="tab-content">
      <div class="hot-jobs-section">
        <h3>热招职位</h3>
        <div v-if="loadingJobs" class="loading">加载中...</div>
        <div v-else>
          <div class="job-list">
            <div class="job-item" v-for="job in jobs" :key="job.id" @click="viewJobDetail(job.id)">
              <div class="job-title">{{ job.title }}</div>
              <div class="job-salary">{{ job.money }}</div>
              <div class="job-info">
                <span>{{ getWorkingYears(job.working) }}</span>
                <span>{{ job.education || '不限' }}</span>
                <span>{{ job.city.name }}</span>
              </div>
              <div class="job-new-tag" v-if="job.is_new">新</div>
            </div>
          </div>
          <div class="view-all-jobs" @click="viewAllJobs">查看全部职位</div>
        </div>
      </div>
    </div>

    <div v-if="activeTab === 'intro' && company" class="tab-content">
      <div class="company-info-section">
        <h3>公司简介</h3>
        <p>{{
            company.description || '快手是领先的内容社区和社交平台，是短视频行业开创者与引领者。快手致力于创造一个温暖和信任的社区，让更多普通人拥有表达和被看见的机会，并由此培育了繁荣与高互动的社区生态，每天有上千万优质内容上传。'
          }}</p>
      </div>

      <div class="company-gallery">
        <h3>公司相册</h3>
        <div class="gallery-placeholder">暂无相册</div>
      </div>

      <div class="company-office">
        <h3>所属地方</h3>
        <div class="office-address">华平坊</div>
        <div class="office-detail">北京市海淀区快手办</div>
      </div>

      <div class="company-business-info">
        <h3>工商信息</h3>
        <div class="info-item">
          <span class="info-label">企业名称：</span>
          <span class="info-value">北京达佳互联信息技术有限公司</span>
        </div>
        <div class="info-item">
          <span class="info-label">法定代表人：</span>
          <span class="info-value">杨远熙</span>
        </div>
        <div class="info-item">
          <span class="info-label">成立时间：</span>
          <span class="info-value">2014-07-02</span>
        </div>
      </div>
    </div>

    <div v-if="activeTab === 'reviews'" class="tab-content">
      <div class="reviews-placeholder">
        <p>暂无工作感受评价</p>
      </div>
    </div>

    <!-- 登录/注册部分 -->
    <div class="login-section">
      <div class="promo-section">
        <p>各大行业职位任你选</p>
        <p>首次验证通过注册BOSS直聘账号</p>
      </div>

      <div class="phone-input">
        <span>+86</span>
        <span>-</span>
        <input v-model="phone" type="text" placeholder="手机号">
      </div>
      <div class="sms-input">
        <input v-model="smsCode" type="text" placeholder="短信验证码">
        <button @click="sendSmsCode" :disabled="isSending">
          {{ isSending ? `${countdown}s后重试` : '发送验证码' }}
        </button>
      </div>
      <button class="login-btn" @click="handleLogin">登录/注册</button>
      <div class="agreement">
        <input type="checkbox" id="agreement" v-model="agreed">
        <label for="agreement">已阅读并同意BOSS直聘（用户协议）（隐私政策），允许BOSS直聘统一管理本人账号信息</label>
      </div>
    </div>

    <!-- 工作时间及福利 -->
    <div class="work-benefits">
      <h3>工作时间及福利</h3>
      <div class="work-time">
        <span>上午10:00 - 下午07:00</span>
      </div>
      <div class="benefits-list">
        <span>双休、弹性工作</span>
        <span>五险一金</span>
        <span>补充医疗保险</span>
        <span>定期体检</span>
        <span>年终奖</span>
        <span>股票期权</span>
        <span>带薪年假</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import axios from 'axios'
import {useRoute, useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()
const id = route.query.id

// 公司数据
const company = ref(null)
const loadingCompany = ref(true)

// 职位数据
const jobs = ref([])
const loadingJobs = ref(false)
const activeTab = ref('jobs')
const phone = ref('')
const smsCode = ref('')
const agreed = ref(false)
const isSending = ref(false)
const countdown = ref(60)

// 计算属性
const listedStatus = computed(() => {
  if (!company.value) return ''
  const statusMap = {
    0: "未融资",
    1: "天使轮",
    2: "A轮",
    3: "B轮",
    4: "C轮",
    5: "D轮及以上",
    6: "已上市",
    7: "不需要融资"
  }
  return statusMap[company.value.is_listed] || ""
})

const employeeScale = computed(() => {
  if (!company.value) return ''
  return company.value.employee_number ? `${company.value.employee_number}人以上` : '10000人以上'
})

// 工作经验转换
const getWorkingYears = (value) => {
  const workingYearsMap = {
    0: "经验不限",
    1: "在校生",
    2: "应届生",
    3: "1-3年",
    4: "3-5年",
    5: "5年以上"
  }
  return workingYearsMap[value] || "经验不限"
}

// 获取公司详情
const fetchCompanyDetail = async () => {
  try {
    loadingCompany.value = true
    const response = await axios.get(`http://127.0.0.1:8000/home/companyDetail/`, {params: {id: id}})
    company.value = response.data.data
  } catch (error) {
    console.error('获取公司详情失败:', error)
  } finally {
    loadingCompany.value = false
  }
}

// 获取职位数据
const fetchJobs = async () => {
  loadingJobs.value = true
  try {
    const response = await axios.get(`http://127.0.0.1:8000/home/company_job/`, {params: {id: id}})
    // 添加is_new字段用于标记新职位
    jobs.value = response.data.data.map(job => ({
      ...job,
      is_new: Math.random() > 0.5 // 随机标记一些职位为"新"
    }))
  } catch (error) {
    console.error('获取职位失败:', error)
  } finally {
    loadingJobs.value = false
  }
}

// 发送验证码
const sendSmsCode = () => {
  if (!phone.value) {
    alert('请输入手机号')
    return
  }

  isSending.value = true
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isSending.value = false
      countdown.value = 60
    }
  }, 1000)

  // 模拟发送验证码
  setTimeout(() => {
    alert('验证码已发送')
  }, 500)
}

// 登录/注册
const handleLogin = () => {
  if (!agreed.value) {
    alert('请先阅读并同意用户协议')
    return
  }

  if (!phone.value || !smsCode.value) {
    alert('请输入手机号和验证码')
    return
  }

  // 模拟登录
  setTimeout(() => {
    alert('登录成功')
  }, 500)
}

// // 查看职位详情
// const viewJobDetail = (jobId) => {
//   router.push(`/job/${jobId}`)
// }

// 查看所有职位
const viewAllJobs = () => {
  router.push(`/jobList/`)
}

onMounted(() => {
  fetchCompanyDetail()
  fetchJobs()
})
</script>

<style scoped>
.company-detail-container {
  max-width: 750px;
  margin: 0 auto;
  padding: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #fff;
}

.company-header {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.company-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.company-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  font-size: 12px;
  color: #666;
  background-color: #f7f7f7;
  padding: 2px 8px;
  border-radius: 3px;
}

.company-service-tag {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.service-tag {
  font-size: 12px;
  color: #666;
  background-color: #f0f9ff;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid #d0ebff;
}

.company-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: baseline;
}

.stat-number {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-right: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.company-nav {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.nav-item {
  font-size: 16px;
  margin-right: 25px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.nav-item.active {
  color: #FE8C00;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: #FE8C00;
  border-radius: 2px;
}

.company-subnav {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.subnav-item {
  font-size: 16px;
  margin-right: 25px;
  color: #666;
  cursor: pointer;
}

.subnav-item.active {
  color: #222;
  font-weight: 500;
}

.tab-content {
  margin-top: 15px;
}

.hot-jobs-section {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.hot-jobs-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #222;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.job-item {
  padding: 15px;
  background-color: #fafafa;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.job-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.job-salary {
  font-size: 15px;
  color: #FE8C00;
  font-weight: 500;
  margin-bottom: 8px;
}

.job-info {
  display: flex;
  gap: 15px;
  font-size: 13px;
  color: #999;
}

.job-new-tag {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 12px;
  color: #fff;
  background-color: #ff4d4f;
  padding: 0 4px;
  border-radius: 2px;
}

.view-all-jobs {
  margin-top: 15px;
  text-align: center;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}

.company-info-section,
.company-gallery,
.company-office,
.company-business-info,
.work-benefits {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.company-info-section h3,
.company-gallery h3,
.company-office h3,
.company-business-info h3,
.work-benefits h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #222;
}

.company-info-section p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.gallery-placeholder {
  height: 100px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 8px;
}

.company-office .office-address {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.company-office .office-detail {
  font-size: 13px;
  color: #999;
}

.reviews-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.info-item {
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
}

.info-label {
  color: #999;
  min-width: 80px;
}

.info-value {
  color: #333;
  flex: 1;
}

.promo-section {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.promo-section p {
  margin: 5px 0;
  font-size: 14px;
  color: #999;
}

.login-section {
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.phone-input {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.phone-input input {
  flex: 1;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
}

.sms-input {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.sms-input input {
  flex: 1;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
}

.sms-input button {
  width: 100px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #FE8C00;
  color: #FE8C00;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.sms-input button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-btn {
  width: 100%;
  height: 40px;
  background-color: #FE8C00;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  cursor: pointer;
}

.agreement {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.agreement input {
  margin-right: 5px;
}

.work-time {
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
}

.benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.benefits-list span {
  font-size: 13px;
  color: #666;
  background-color: #f7f7f7;
  padding: 4px 8px;
  border-radius: 3px;
}

.loading {
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>